<template>
  <div  >
  <el-table :data="tableData"
            :row-style="{height: '0'}"
            :cell-style="{padding: '3px'}"
  >
  <el-table-column prop="date" label="日期" width="140">
  </el-table-column>
  <el-table-column prop="name" label="姓名" width="120">
  </el-table-column>
  <el-table-column prop="address" label="地址">
  </el-table-column>
    <el-table-column prop="" label="操作">
      <el-button @click="drawer = true" type="primary" class="goon">
        点我打开
      </el-button>
    </el-table-column>
  </el-table>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :append-to-body='true'
      :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>
  </div>

</template>

<script>
export default {
  name: 'option1',
  props: {},
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      drawer: false,
      direction: 'rtl',
      tableData: Array(50).fill(item),
      // 是否开启调试输出
      debug: true
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {

  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped >
  .goon {
    color: #FFF;
    background-color: #1E90FF;
    border-color: #1E90FF;
    height: 20px;
    line-height: 20px;
    padding: 0 20px;
  }
</style>
